import { EmployeeModel } from '@/pages/person/data';
import { createemployee } from '@/pages/person/service';
import {
  ModalForm,
  ProForm,
  ProFormInstance,
  ProFormMoney,
  ProFormSelect,
  ProFormText,
} from '@ant-design/pro-components';
import { useRequest } from '@umijs/max';
import { Button, InputNumberProps, message } from 'antd';
import React, { useRef, useState } from 'react';

export type EditFormProps = {
  trigger?: JSX.Element;
  onOk?: () => void;
  initialValues?: Partial<EmployeeModel.employeeResponse>;
};

const EditForm: React.FC<EditFormProps> = ({ onOk, trigger, initialValues }) => {
  const [messageApi, contextHolder] = message.useMessage();
  const [modalVisit, setModalVisit] = useState(false);
  const editFormRef = useRef<ProFormInstance>();
  /* const intl = useIntl(); */

  const { run, loading } = useRequest(createemployee, {
    manual: true,
    onSuccess: () => {
      messageApi.success('Added successfully');
      onOk?.();
      setModalVisit(true);
      editFormRef.current?.resetFields();
    },
    onError: () => {
      messageApi.error('Adding failed, please try again!');
    },
  });
  const openChange = (value: boolean) => {
    setModalVisit(value);
    editFormRef.current?.resetFields();
  };
  const onNumberChange: InputNumberProps['onChange'] = (value) => {
    console.log(value);
  };

  return (
    <>
      {contextHolder}
      <ModalForm
        initialValues={initialValues}
        formRef={editFormRef}
        title={initialValues ? '修改' : '新增'}
        open={modalVisit}
        onOpenChange={openChange}
        trigger={trigger}
        modalProps={{
          onCancel: () => {},
          okText: '保存',
          okButtonProps: { loading },
          centered: true,
        }}
        onFinish={async (value: EmployeeModel.employeeResponse) => {
          await run(value);
          return true;
        }}
        submitter={{
          render: (props, defaultDoms) => {
            return [
              ...defaultDoms,
              <Button
                key="saveAndContinue"
                type="primary"
                onClick={() => run(editFormRef.current?.validateFieldsReturnFormatValue?.())}
              >
                保存并继续
              </Button>,
            ];
          },
        }}
      >
        {' '}
        <ProForm.Group>
          <ProFormText
            name="employeeId"
            label="账户名称"
            rules={[{ required: true, message: '请输入账户名称' }]}
            placeholder="请输入账户名称"
            width="md"
          />
          <ProFormText
            name="employeeId"
            label="关联人员"
            rules={[{ required: true, message: '请输入关联人员' }]}
            placeholder="请输入关联人员"
            width="md"
          />
        </ProForm.Group>
        <ProForm.Group>
          <ProFormSelect
            width="md"
            name="department"
            label="关联钱包"
            placeholder="请选择关联钱包类别"
            options={[{ label: '默认类别', value: '0' }]}
          />
          <ProFormSelect
            width="md"
            name="department"
            label="账户状态"
            placeholder="请选择账户状态"
            options={[
              { label: '正常', value: '0' },
              { label: '挂失', value: '1' },
              { label: '黑名单', value: '2' },
            ]}
          />
        </ProForm.Group>
        <ProForm.Group>
          <ProFormMoney
            label="现金次数"
            name="amount1"
            locale="en-US"
            fieldProps={{
              moneySymbol: false,
            }}
            initialValue={0}
            min={0}
            width="md"
          />
          <ProFormMoney
            label="津贴次数"
            name="amount1"
            locale="en-US"
            fieldProps={{
              moneySymbol: false,
            }}
            initialValue={0}
            min={0}
            width="md"
          />
        </ProForm.Group>
        <ProForm.Group>
          <ProFormMoney
            label="补贴次数"
            name="amount1"
            locale="en-US"
            fieldProps={{
              moneySymbol: false,
            }}
            initialValue={0}
            min={0}
            width="md"
          />
          <ProFormMoney
            label="现金额度"
            name="amount1"
            locale="en-US"
            fieldProps={{
              moneySymbol: false,
            }}
            initialValue={0}
            min={0}
            width="md"
          />
        </ProForm.Group>
        <ProForm.Group>
          <ProFormMoney
            label="津贴额度"
            name="amount1"
            locale="en-US"
            fieldProps={{
              moneySymbol: false,
            }}
            initialValue={0}
            min={0}
            width="md"
          />
          <ProFormMoney
            label="补贴额度"
            name="amount1"
            locale="en-US"
            fieldProps={{
              moneySymbol: false,
            }}
            initialValue={0}
            min={0}
            width="md"
          />
        </ProForm.Group>
      </ModalForm>
    </>
  );
};

export default EditForm;
